<?php $left_width=360; ?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
	<title></title>

	<script src="{:jquery}"></script>
	<link href="{:bootstrap_min_css}" rel="stylesheet">
	<script src="{:bootstrap_min_js}"></script>

	<!--[if lt IE 9]>
	<script src="//imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
	<![endif]-->


	<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.3.0/tcplayer.min.css" rel="stylesheet"/>
	<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。-->
	<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.3.0/libs/hls.min.0.13.2m.js"></script>
	<!--播放器脚本文件-->
	<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.3.0/tcplayer.v4.3.0.min.js"></script>

	<link type="text/css" rel="stylesheet" href="/static/ckplayer/css/ckplayer.css" />
	<script type="text/javascript" src="/static/ckplayer/js/ckplayer.min.js" charset="UTF-8"></script>


	<style>
		html,body{
			margin: 0;
			padding: 0;
		}
		.main-wrapper {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: #eeeeee;
		}
		.s8 .sb-list{
			width: {$left_width}px;
			border-right: 1px solid #eeeeee;
			height: 100%;
			box-shadow: -1px 0 5px rgba(0,0,0,.1);
			background-color: #ffffff;
			position: absolute;
			overflow-y: scroll;
		}
		.s8 .sb-content{
			margin-left: {$left_width}px;
			height: 100%;
		}
		.s8 .player-wrapper{
			padding: 20px;
			height: 100%;
			width: 100%;
		}
		.s8 .sb-title {
			height: 45px;
			line-height: 45px;
			border-bottom: #DDDDDD;
			box-shadow: -1px 0 5px rgba(0,0,0,.1);
		}

		.sb-content .top {
			position: fixed;
			top: 0;
			left: {$left_width-2}px;
			height: 50px;
			right: 0;
			background-color: #ffffff;
			border-bottom: 1px solid #888888;
		}

		.sb-content .center {
			position: fixed;
			top: 50px;
			left: {$left_width}px;
			bottom: 100px;
			right: 0;
		}

		.sb-content .bottom {
			position: absolute;
			height: 100px;
			width: 100%;
			bottom: 0;
		}
		.player-wrapper video{
			/*border: 1px solid #b1b1b1;*/
			background-color: #333333;
		}

		.top .title{
			border-left: 3px solid #50cc50;
			padding: 5px;
			margin-left: 10px;
			margin-top: 7px;
			font-size: 16px;
		}

		@media (max-width: 960px) {
			.sb-list{
				width: 100%!important;
			}
			#video-box {
				position: fixed;
				left: 0;
				right: 0;
				height: 300px;
			}
			.sb-content .top{
				left: 0;
			}
			#video-box{
				padding: 0;
			}
		}
		.mc-tag{
			font-size: 12px;
			padding: 2px 4px;
			background-color: #42c160;
			color: #ffffff;
		}

	</style>
</head>
<body>

<div class="main-wrapper s8">
	<div class="sb-list">
		<div style="padding: 6px;">
			<a type="button" class="btn btn-primary" href="/course/{$course.id}">{$course.name}</a>
		</div>
		<ul class="list-group">
			{volist name="list" id="le" key="k" }
			<li class="list-group-item">
				<a href="/study/{$le.course_id}/{$le.id}">
					<div>{$k} {$le.name}
						{if $le.is_free==1 }
						<span class="mc-tag">免费</span>
						{/if}
					</div>
				</a>
			</li>
			{/volist}
		</ul>
	</div>
	<div class="sb-content">
		<!--<div class="sb-title">
            课时：{$task.name}
        </div>
        <div class="player-wrapper">

        </div>-->
		<div class="top">
			<div class="title">{$lesson.name}</div>
		</div>
		<div class="center">
			<!--<div class="player-wrapper">
				<video id="id_test_video" style="width:100%;height: 100%;"></video>
			</div>-->


			<div id="video-box" class="video" style="width: 100%; height: 500px;">播放容器</div>
			<script>
				//调用开始
				var videoObject = {
					container: '.video', //视频容器
					plug:'hls.js',//设置使用hls插件
					//poster:'video/poster.png',//封面图片
					video:'{$video_url|raw}'//视频地址
				};
				var player=new ckplayer(videoObject)//调用播放器并赋值给变量player

				/*
                 * ===============================================================================================
                 * 以上代码已完成调用演示，下方的代码是演示监听动作和外部控制的部分
                 * ===============================================================================================
                 * ===============================================================================================
                 */
				/*player.play(function(){
					document.getElementById('state').innerHTML='监听到播放';
				});
				player.pause(function(){
					document.getElementById('state').innerHTML='监听到暂停';
				});
				player.volume(function(vol){
					document.getElementById('state').innerHTML='监听到音量改变：'+vol;
				});
				player.muted(function(b){
					document.getElementById('state2').innerHTML='监听到静音状态：'+b;
				});
				player.full(function(b){
					document.getElementById('state').innerHTML='监听到全屏状态：'+b;
				});
				player.ended(function(){
					document.getElementById('state').innerHTML='监听到播放结束';
				});*/
			</script>

			<div style="display: none">
				<p>控制：</p>
				<p>
					<button type="button" onclick="player.play()" >播放</button>
					<button type="button" onclick="player.pause()" >暂停</button>
					<button type="button" onclick="player.seek(20)" >跳转</button>
					<button type="button" onclick="player.volume(0.6)">修改音量</button>
					<button type="button" onclick="player.muted()">静音</button>
					<button type="button" onclick="player.exitMuted()">恢复音量</button>
					<button type="button" onclick="player.full()">全屏</button>
					<button type="button" onclick="player.webFull()">页面全屏</button>
					<button type="button" onclick="player.theatre()">剧场模式</button>
					<button type="button" onclick="player.exitTheatre()">退出剧场模式</button>
				</p>
			</div>

		</div>
		<!--<div class="bottom"></div>
-->
	</div>
</div>

{if $is_own==0 && $is_free==0 }
<script>
	//alert('未拥有此课程');
	//location.href = '/course/{$lesson.course_id}/task';
	$('.player-wrapper').empty().html('<div>您未加入此课程的学习</div>');
</script>
{/if}

<script>
	/*(function(){
		var player = new TCPlayer('id_test_video', { // player-container-id 为播放器容器 ID，必须与 html 中一致
			//fileID: '387702293559253378', // 请传入需要播放的视频 fileID（必须）
			//appID: '1252460838', // 请传入点播账号的 appID（必须）
			//width:'100%',
			//height:'100%',
			//"m3u8": "http://1252460838.vod2.myqcloud.com/270b0551vodtranscq1252460838/eff94cbd387702293559253378/v.f100230.m3u8",
			//"poster" : "http://www.test.com/myimage.jpg",
		});


		function play(lessionId) {
			//获取课时的视频路径
			$.post('/lesson/video/url',{lessionId:lessionId},function (ret) {
				//player.src(data.url);
				ret = JSON.parse(ret);
				console.log(ret);
				if (ret.code == 0) {
					player.src(ret.url);
				}
			});

		}

		play('{$lesson.id}');

	})();*/
	$(function () {
		function resizePlayerBox() {
			var pw = $('#video-box');
			//pw.height(pw.width() / 16 * 9);
			var h = $(window).height()-240;
			console.log('h='+h)
			pw.height(h);
			console.log(pw.width())
			if ($(window).width() < 960) {

				pw.height($(window).width()*0.562);
				$('.sb-list').css('top', pw.height() + 60);
			}else{
				$('.sb-list').css('top', '0');
			}

		}
		$(window).resize(resizePlayerBox);
		$(window).resize();
	});
</script>
</body>
</html>
